<template>
  <el-card class="box-card">
    <div class="search-bar">
      <el-form :inline='true' :model='searchData' class="fl">
        <el-input style="display: none;"></el-input>
        <el-form-item label="角色名">
          <el-input v-model="searchData.loginName" placeholder="用户名" @keyup.enter.native="onSearch()"></el-input>
        </el-form-item>
      </el-form>
      <div class="fl">
        <el-button type="text" @click="handleReset">重置</el-button>
        <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
      </div>
    </div>
<!--    <div class="tools-bar">-->
<!--      <el-button type="success" icon="el-icon-plus" size="small" @click="dialogVisible = true;dialogTitle='新增用户'">新增用户</el-button>-->
<!--    </div>-->
    <div>
      <el-table v-loading.body="tableLoading" ref="singleTable" :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" border highlight-current-row style="width: 100%">
        <el-table-column prop="id" width="80" label="用户id"></el-table-column>
        <el-table-column prop="user_name" label="用户名" min-width="120">
        </el-table-column>
        <el-table-column prop="role_names" min-width="210" label="权限">
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-bar">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 25, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalRecord">
      </el-pagination>
    </div>
    <!--弹出窗口 -->
    <el-dialog :title="title" :visible.sync="dialogAddgsVisible"  @close="closeDialogAddgsVisible" class="hs-formBg">
      <el-form  :model="addForm" :rules="rules" ref="addForm" label-width="100px">
        <el-row>
          <el-col span="10">
            <el-form-item label="焊接规范" :label-width="formLabelWidth" class="hs-form-item">
              <el-input v-model="addForm.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="10">
            <el-form-item label="监控值" :label-width="formLabelWidth">
              <el-input v-model="addForm.sort" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="10">
            <el-form-item label="故障代码" :label-width="formLabelWidth">
              <el-input v-model="addForm.sort" ></el-input>
            </el-form-item>
          </el-col>
          <el-col span="10">
            <el-form-item label="焊枪号" :label-width="formLabelWidth">
              <el-input v-model="addForm.sort" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="10">
            <el-form-item label="焊接周波" :label-width="formLabelWidth">
              <el-input v-model="addForm.sort" ></el-input>
            </el-form-item>
          </el-col>
          <el-col span="10">
            <el-form-item label="一次焊接电流" :label-width="formLabelWidth">
              <el-input v-model="addForm.sort" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="10">
            <el-form-item label="二次焊接电流" :label-width="formLabelWidth">
              <el-input v-model="addForm.sort" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddgsVisible=false">取消</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>
<script>
export default {
  data () {
    return {
      addForm: {},
      dialogAddgsVisible: false,
      currentPage: 1,
      totalRecord: 0,
      pageSize: 10,
      tableLoading: false,
      searchData: {
        loginName: ''
      },
      tableData: []
    }
  },
  created () {
    this.$axios.post('/user/queryAllUserList', {}).then((res) => {
      this.tableData = res.data.list
      this.totalRecord = res.data.list.length
    })
  },
  methods: {
    closeDialogAddgsVisible: function () {

    },
    onSearch () {
      this.$axios.post('/user/queryDataList', { page_size: this.pageSize, page_num: this.currentPage, user_name: this.searchData.loginName }).then((res) => {
        this.tableData = res.data.list
        this.totalRecord = res.data.list.length
      })
    },
    handleReset () {
      this.searchData = {
        loginName: ''
      }
    },
    handleSizeChange (val) {
      this.pageSize = val
    },
    handleCurrentChange (val) {
      this.currentPage = val
    },
    sexRule (row, column) {
      return row.sex === 0 ? '男' : row.sex === 1 ? '女' : '未知'
    }
  }
}
</script>
<style lang="less">
.fr {
  float: right;
}
.fl {
  float: left;
}
.search-bar {
  overflow: hidden;
}
</style>

<style>
.tools-bar {
  margin-bottom: 20px;
}
</style>
